<template>
  <el-dialog title="查看配菜" v-model="visible" width="55%" append-to-body>
    <el-form :model="form" ref="goodRef" label-width="100px">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>配菜名称 【{{ goodsDetails.goodsName }}】</span>
          </div>
        </template>
        <div>
          <el-row>
            <el-col :span="12">
              <el-descriptions :column="2">
                <!-- {{ getGoodsTypeName( goodsDetails.goodsTypeId )}} -->
                <el-descriptions-item label="配菜分类:">{{
                  goodsDetails.goodsTypeName
                }}</el-descriptions-item>
                <el-descriptions-item label="保质期:"
                  >{{ goodsDetails.expireDay }} 天</el-descriptions-item
                >
                <el-descriptions-item label="成本价:"
                  >{{ goodsDetails.costPrice }} 元</el-descriptions-item
                >
                <el-descriptions-item label="原价:"
                  >{{ goodsDetails.salePrice }} 元</el-descriptions-item
                >
                <el-descriptions-item label="创建人:">{{
                  goodsDetails.createBy
                }}</el-descriptions-item>
                <el-descriptions-item label="创建时间:">{{
                  goodsDetails.createTime
                }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="4">
              <el-descriptions :column="1">
                <el-descriptions-item label="城市标签:">
                  {{ cityNameOptions.find((i) => i === goodsDetails.cityName) }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="4">
              <el-descriptions :column="1">
                <el-descriptions-item label="配菜状态:">
                  <el-tag :type="goodsDetails.enable !== 1 ? 'danger' : ''">{{
                    goodsDetails.enable !== 1 ? '禁用' : '启用'
                  }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="8">
              <el-descriptions :column="1">
                <el-descriptions-item label="配菜描述:">
                  {{ goodsDetails.goodsDesc }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>配菜详情</span>
          </div>
        </template>
        <div>
          <el-row>
            <el-col :span="10">
              <label style="font-size: 16px">制作步骤</label>
              <div class="jrsc">
                <div>
                  <p>加热时长</p>
                  <el-tag effect="dark" type="info" round>{{ goodsDetails.heatTime }} s</el-tag>
                </div>
                <div>
                  <p>温度</p>
                  <el-tag effect="dark" type="info" round>{{ goodsDetails.temperature }} ℃</el-tag>
                </div>
              </div>
              <div class="kouwei">
                <span>口味: {{ getGoodTasteText(goodsDetails.taste) }}</span>
                <span>重量: {{ goodsDetails.weight }} g </span>
                <span>热量: {{ goodsDetails.calorie }} kal</span>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="echart-box">
                <label>营养价值</label>
                <nutritional ref="nutritionalRef" :data="chartData" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" v-if="goodsDetails.goodsDetailImgVoList">
        <template #header>
          <div class="card-header">
            <span>配菜详情图片</span>
          </div>
        </template>
        <div>
          <el-descriptions
            v-for="(item, index) in goodsDetails.goodsDetailImgVoList"
            :key="index"
            :column="1"
            direction="vertical"
          >
            <el-descriptions-item
              :label="item.imgType === 1 ? '封面图:' : '详情图:'"
              v-if="item.resourceType === 1"
            >
              <el-image
                v-for="(itemimg, indeximg) in item.info"
                :key="indeximg"
                :src="itemimg.resourceUrl"
                fit="fill"
                class="form-img"
                @click="handlePictureCardPreview(itemimg.resourceUrl)"
              />
            </el-descriptions-item>
            <el-descriptions-item label="视频:" v-if="item.resourceType === 2">
              <video
                v-for="(videoitem, videoindex) in item.info"
                :key="videoindex"
                :src="videoitem.resourceUrl"
                width="200"
                preload
                :autoplay="false"
                controls
                class="video-box"
              ></video>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
          <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
        </el-dialog>
      </el-card>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, nextTick, watch } from 'vue'
import nutritional from './nutritionalechart.vue'
import { getGoodsDetail, getGoodsgoodsNutritiveDetail, getGoodsImgDetail } from '@/api/meal/goods'
const { proxy } = getCurrentInstance()
const { goods_taste } = proxy.useDict('goods_taste')
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const props = defineProps({
  operType: {
    type: String,
    default: 'view'
  },
  SortOptions: {
    type: Array,
    default: null
  },
  data: {
    type: Object,
    default: () => ({
      goodsName: null,
      goodsDesc: null,
      areaId: null,
      goodsTypeId: null,
      goodsTypeName: null,
      salePrice: 0,
      costPrice: 0,
      heatTime: 30,
      supplier: null,
      frontImgId: null,
      expireDay: 1
    })
  }
})
const chartData = ref([
  {
    value: 50,
    name: '脂肪'
  },
  {
    value: 40,
    name: '钠'
  },
  {
    value: 10,
    name: '碳水化合物'
  },
  {
    value: 4,
    name: '蛋白质'
  },
  {
    value: 80,
    name: '膳食纤维'
  }
])

const form = ref(props.data)
const visible = ref(false)
const currentId = ref()
const goodsDetails = ref({})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
function handlePictureCardPreview(url) {
  dialogImageUrl.value = url
  dialogVisible.value = true
}

function show(type, id) {
  visible.value = true
  currentId.value = id
  getDetailData(id)
  nextTick(() => {
    proxy.$refs.nutritionalRef.initEchart()
  })
}
function getDetailData(goodsId) {
  getGoodsDetail(goodsId).then((res) => {
    //基础信息
    goodsDetails.value = res?.data
    //营养列表
    goodsDetails.value.goodsNutritiveVoList = res.data?.goodsNutritiveVoList ?? []
    chartData.value = goodsDetails.value.goodsNutritiveVoList.map((item) => {
      return {
        name: item.nutritive,
        value: item.value
      }
    })
    //图片视频
    if (!res.data.goodsDetailImgVoList) {
      goodsDetails.value.goodsDetailImgVoList = null
    } else {
      res.data.goodsDetailImgVoList.forEach((element) => {
        element.url = element.resourceUrl
      })
      let arr1 = res.data.goodsDetailImgVoList.filter((item) => item.resourceType === 2)
      let arr2 = res.data.goodsDetailImgVoList.filter(
        (item) => item.resourceType === 1 && item.imgType === 1
      )
      let arr3 = res.data.goodsDetailImgVoList.filter(
        (item) => item.resourceType === 1 && item.imgType === 2
      )
      let obj1 = {
        resourceType: 2,
        imgType: null,
        info: arr1
      }
      let obj2 = {
        resourceType: 1,
        imgType: 1,
        info: arr2
      }
      let obj3 = {
        resourceType: 1,
        imgType: 2,
        info: arr3
      }
      goodsDetails.value.goodsDetailImgVoList = [obj2, obj3, obj1]
    }
  })
}

function getGoodsTypeName(goodsTypeId) {
  const selectedType = props.SortOptions.find((option) => option.goodsTypeId == goodsTypeId)
  return selectedType ? selectedType.goodsTypeName : null
}
function getGoodTasteText(taste) {
  const selectedType = goods_taste.value.find((option) => option.value == taste)
  return selectedType ? selectedType.label : null
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-input {
  margin-bottom: 5px;
}
.form-img {
  width: 150px;
  margin-left: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.video-box {
  margin-left: 8px;
}
:deep(.el-card__body) {
  padding: 15px 20px 10px 20px !important;
}
.echart-box {
  width: 100%;
  height: 180px;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 700;
}
.jrsc {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  div:last-child {
    margin-left: 20px;
  }
}
.kouwei {
  margin-top: 40px;
  span {
    margin-left: 10px;
  }
}
</style>
